<template>
  <div class="col-md-12 bg-table">
    <div class="row">
      <div class="col-md-11">
        <h2 class="text-center">记录查看</h2>
      </div>
      <div class="col-md-1">
        <button type="button" class="btn btn-light btn-jiali-bg" @click="quxiao">X</button>
      </div>
    </div>
    <div class="col-md-12 table-base">
      <table class="table table-striped table-bordered">
        <thead>
          <tr>
            <th>简历所有者姓名</th>
            <th>已上传简历</th>
            <th>上传时间</th>
            
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in paginatedData" :key="index">
            <td>{{ item.name }}</td>
            <td>{{ item.file_name }}</td>
            <td>{{ item.date }}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="fenye">
      <ul class="pagination justify-content-center">
        <li class="page-item" v-for="page in totalPages" :key="page" :class="{ active: currentPage === page }">
          <a class="page-link" href="#" @click="changePage(page)">{{ page }}</a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import router from '@/router';
export default {
  data() {
    return {
      data:JSON.parse(localStorage.getItem('jiludata')),
      currentPage: 1,
      itemsPerPage: 6,
    };
  },
  computed: {
    totalPages() {
      return Math.ceil(this.data.length / this.itemsPerPage);
    },
    paginatedData() {
      const startIndex = (this.currentPage - 1) * this.itemsPerPage;
      const endIndex = startIndex + this.itemsPerPage;
      return this.data.slice(startIndex, endIndex);
    },
  },
  methods: {
    changePage(page) {
      this.currentPage = page;
    },
    quxiao(){
      router.push({name:'resumeUpload'})
    }
  },
};
</script>

<style scoped>
.btn-jiali-bg{
  background-color: #c9dae1;
  border: none;
  margin-right: 0px;
}
.table-base{
  background-color: rgba(243, 241, 245, 0);
  /* margin-top: 100px; */
  margin-bottom: 0px;
}
.fenye{
  margin-top: 0px;
}
.bg-table{
  margin-top: 50px;
  background-color: rgba(240, 255, 247, 0.822);
  height: 430px;
  /* border: 2px solid red; */
  border-radius: 2%;
}

</style>